<template>
  <div class="time-line">
    <div class="p-lr-12 mtb-20">
      <el-slider v-model="scaleValue" :min="10" :max="100" />
    </div>
    <div class="scale flex" :style="{ '--itemWidth': scaleValue ? scaleValue + 'px' : '10px' }">
      <div class="item" v-for="(item, index) in 301" :key="index">
        <div class="title">{{ index % 5 === 0 ? index : '' }}</div>
        <div :class="['line', index % 5 === 0 ? 'active': '']"></div>
      </div>
    </div>
    <div class="bottom m-tb-20">
      <div class="banner mt-10" v-for="(item, index) in 2" :key="index" @mousedown="e => mousedown(e.x, e.target.offsetLeft, index)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scaleValue: 0,
      mousedownX: 0,
      isDragging: false,
      curIndex: 0,
    }
  },
  methods: {
    init() {
      const bannerList = document.querySelectorAll('.banner')
      const container = document.querySelector('.time-line')
      const containerRight = container.getBoundingClientRect().right
      const initPosX = bannerList[0].offsetLeft
      document.addEventListener('mousemove', ({x}) => {
        if (this.isDragging && x >= initPosX + this.mousedownX && x + bannerList[this.curIndex].offsetWidth - this.mousedownX < containerRight) {
          bannerList[this.curIndex].style.marginLeft = x - initPosX - this.mousedownX + 'px'
        }
      })
      document.addEventListener('mouseup', () => {
        this.isDragging = false
      })
    },
    mousedown(x, offsetLeft, index) {
      this.mousedownX = x - offsetLeft
      this.isDragging = true
      this.curIndex = index
    }
  },
  mounted() {
    this.init()
  }
}
/*
* https://zhuanlan.zhihu.com/p/65082165
* */
</script>

<style scoped lang="scss">
.time-line {
  //overflow: hidden;
  border: 1px solid red;

  .scale {
    height: 50px;

    .item {
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: var(--itemWidth);
      border-bottom: 1px solid cornflowerblue;
      user-select: none;

      .title {
        height: 30px;
      }

      .line {
        height: 10px;
        width: 1px;
        background-color: cornflowerblue;

        &.active {
          height: 20px;
        }
      }
    }
  }

  .bottom {
    .banner {
      width: 200px;
      height: 20px;
      background-color: cornflowerblue;
    }
  }
}
</style>